<template>
	<view class="service">
		<view class="top">
			<view class="phone" @click="open">
				<image src="../../static/img/service_tel.png" mode=""></image>
				<view class="">
					电话咨询
				</view>
			</view>
			<u-modal v-model="show" :content="content" :show-cancel-button="true" :show-title="false"></u-modal>
			<view class="weixin"  @click="open1">
				<image src="../../static/img/send_h.png" mode=""></image>
				<view class="">
					在线咨询
				</view>
			</view>
			<u-modal v-model="show1" :content="content1" :show-confirm-button="false" :show-cancel-button="true" cancel-text="返回"  title="模拟进入客服会话"></u-modal>
		</view>
		<view class="time">
			咨询时间：9.00-18.00
		</view>
		<view class="want">
			猜你想问
		</view>
		<view class="list">
			<u-collapse>
				<u-collapse-item :title="item.head" v-for="(item, index) in itemList" :key="index">
					{{item.body}}
				</u-collapse-item>
			</u-collapse>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				itemList: [{
					head: "下单后，如何取消订单？",
					body: "1.订单状态为“待抢单”时，点击【我的】-->【订单】-->【订单详情】-->【取消订单】；2.订单状态为“已接单”时，您可以联系骑手，与骑手协商后，再自行操作取消订单。订单取消后会自动进入退款流程，使用微信支付的订单会在1分钟内退款成功，微信支付的用户可以在微信钱包的交易管理里查看所有进出账记录。",
					open: true,
					disabled: true
				}, {
					head: "对订单费用有疑问怎么办？",
					body: "可以通过首页的服务投诉咨询；",
					open: false,
				}, {
					head: "可以跨城配送吗？",
					body: "目前提供同城内的专人递送服务，支持XX区配送服务",
					open: false,
				}],
				show: false,
				content: '拨打18878882901？【仅为模拟】',
				show1: false,
				content1: '开发者工具暂不支持'
			}
		},
		methods: {
			open() {
				this.show = true;
			},
			open1() {
				this.show1 = true;
			}
		}
	}
</script>

<style scoped>
	.service {
		background: rgb(238, 238, 238);
		height: 1250rpx;
	}

	.top {
		width: 100%;
		height: 200rpx;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.phone {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 0 auto;
	}

	.phone image {
		width: 90rpx;
		height: 90rpx;
	}

	.weixin {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 0 auto;
	}

	.weixin image {
		width: 90rpx;
		height: 90rpx;
	}

	.time {
		width: 100%;
		height: 60rpx;
		color: rgb(229, 159, 90);
		background-color: rgb(255, 242, 215);
		text-align: center;
		padding-top: 12rpx;
	}

	.want {
		width: 100%;
		font-size: 30rpx;
		padding: 26rpx;
		color: rgb(153, 153, 153);
	}

	.list {
		width: 100%;
		padding: 22rpx;
		background-color: #ffff;
	}

	.u-collapse-item {
		border-bottom: 1px solid rgb(238, 238, 238);
	}
</style>
